<template>
	<div class="content">
		<!--头部-->
		<!-- <my-header :title="'周边门店'" :hasTitle="true" :hasBack="true" ></my-header> -->
		<div style="flex:1;overflow-y:auto;">
			<!--<div style="height:3rem;"></div>-->
			<ul class="stores_list" style="text-align: left;">
				<li id="store_detail" @click="goDetail(item)" v-for="(item,index) in stores" :key="index">
		            <img v-if="item.imageUrl != null" :src="JSON.parse(item.imageUrl)[0] || 'static/image/demo1.png'" style="width: 100%;height: auto;"/>
		            <div class="stores_address">
		            	<h3>{{item.storeName}}</h3>
	            		<p >
	            			<span style="float: left;width: 72%;">{{item.province}}{{item.city}}{{item.distric}}{{item.address}}</span>
	            			<span style="float: right;width: 28%;text-align: right;" v-if="item.positionLat && item.positionLng && sucecssY">
                                <i class="icon njfont nj-dizhi" ></i>
                                {{storeDistance[0] != undefined?storeDistance[index]:''}}km
                            </span>
	            		</p>
	            		<div style="clear: both;"></div>
		            </div>
				</li>
			</ul>
            <div class="no_data" style="margin-top:3.5rem;" v-if="!stores || !stores.length">
			    <img src="static/image/no_order.png"/>
			    <p>暂无在营业门店~</p>
			    <!-- <div class="back_home aui-btn aui-btn-outlined" @click.stop="goHome">逛逛首页</div> -->
			</div>
		</div>
		<div id="stores_map" style="width: 0;height: 0;">
			
		</div>
	</div>
</template>

<script>
    import {Toast} from '../../utils/toast.js';
	export default {
		props:{
			changeCollectStuta: {
            	type: Function,
                default: ()=>{}
           },
           storeList: {
           		type:Array,
           		default: ()=>{
           			var arr = [];
           			return arr;
           		}
           }
		},
		data(){
			return {
				stores:[],
				img:null,
				lat:null, //当前位置纬度
				lng:null,  //当前位置经度,
				storeDistance: [],
				myMap:null,
                sucecssY:false, //定位是否成功
			}
		},
		components:{
		},
		methods: {
			goDetail(item){
				if(item.positionLng && item.positionLat){
                    this.$router.push({path:'roundStoreDetail',query:{store:item}});
                }else{
                    Toast({
                        message: "未查询到门店位置信息",
                        type: "fail",
                        duration: 2000
                    })
                    return
                }
			},
			goBack(){
				window.history.back();
			},
			//根据高德地图 计算与门店之间的距离
			getDistanceAgain(item, index){
				var arr = [];
				if(item.positionLng){
					arr.push(Number(item.positionLng));
					arr.push(Number(item.positionLat));
				}
				var myDistance = null;
				var that = this;
				var lnglat = new AMap.LngLat(this.lng,this.lat);
				console.log((lnglat.distance(arr))/1000,'两点之间的距离');
				myDistance = (lnglat.distance(arr))/1000 ;
				if(myDistance=='Infinity'){
					that.storeDistance[index] ='';
				}else{
					that.storeDistance[index] = Number(myDistance).toFixed(2);
				}
				
			},
			initMap(){
					//创建地图
				var that = this;
				this.myMap = new AMap.Map('stores_map', {
					zoom: 16,
					center: [116.397428, 39.90923], //new AMap.LngLat(116.39,39.9)
					resizeEnable: true,
					scrollWheel: true
				});
				//地图定位，获取当前位置的经纬度
				this.myMap.plugin(['AMap.Geolocation','AMap.LngLat'],function(){
					var userGeolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：无穷大
						maximumAge: 0 //定位结果缓存0毫秒，默认：0
					})
					
					console.log(userGeolocation,'dingwei對象')
					console.log(that.myMap,'地圖對象')
					that.myMap.addControl(userGeolocation);
					userGeolocation.getCurrentPosition();
					AMap.event.addListener(userGeolocation, 'complete', function(result) {
                        console.log(result, '定位成功返回结果');
                        that.sucecssY = true;
						//存经纬度信息
						that.lng = result.position.lng;
						that.lat = result.position.lat;
					}); //返回定位信息
					
				})	
			},
			initScript() {
				//判断如果有script就删掉
				if (document.querySelector("#amap-box")){
					document.body.removeChild(document.querySelector("#amap-box"));
				}
				let amapBox = document.createElement("div");
				amapBox.setAttribute("id", "amap-box");
	
				let script1 = document.createElement("script");
				script1.onload = () => {
					console.log("地图加载完毕");
					let script2 = document.createElement("script");
					script2.onload = () => {
						console.log("script2加载完毕");
						 setTimeout(() => {
                            this.initMap();
                        },500)
					}
					script2.src = "//webapi.amap.com/ui/1.0/main.js";
					amapBox.insertAdjacentElement("beforeend", script2);
				};
				script1.src = "https://webapi.amap.com/maps?v=1.3&key=9bfe3d8b8882b7d3e4c23e43d38b18ba";
				amapBox.insertAdjacentElement("beforeend", script1);
				document.body.appendChild(amapBox);
			},
		},
		watch: {
			storeList(newVal,oldVal){
				console.log(this.storeList,'自组建健康')
				this.stores = this.storeList;
				// this.stores = [];
//				if(Array.isArray(this.stores) && this.stores.length){
//					for(let i = 0; i < this.stores.length; i++){
//						
//					}
//				}
				
//				this.getDistance();
				
				
			},
			lng(newVal,oldVal){
				if (Array.isArray(this.stores) && this.stores.length) {
					this.storeDistance = new Array(this.stores.length);
//					console.log(this.storeDistance[0],'嗯哼')
					this.stores.forEach((item, index) => {
						this.getDistanceAgain(item, index);
					});
					
				}
			}
		},
		mounted(){
			this.initScript();
		},
		created(){
			console.log(this.storeList,'自组建获取门店');
			this.stores = this.storeList;
			
		},
		beforeDestory(){
			// 处理抖动问题
			if(document.querySelectorAll(".amap-sug-result")){
				document.querySelector("body").removeChild(document.querySelectorAll(".amap-sug-result"));
			}
		},
	}
</script>

<style scoped="scoped">
	.aui-searchbar, .aui-bar-nav{
		position: static;	
	}
	.content {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	}
</style>

<!--parent.style.width = '100%';
parent.style.height = '100%';-->